<template>
  <div class="addus">
    <el-dialog
      v-model="dialogVisible"
      title="创建客单"
      width="800px"
      :before-close="handleClose"
      :style="{ paddingBottom: active == 1 ? '0' : 'revert-layer' }"
    >
      <div style="width: 100%; margin: 0 auto">
        <el-steps :active="active" finish-status="success" align-center>
          <el-step title="验证用户手机号" />
          <el-step title="创建用户" />
          <el-step title="选择服务/商品" />
        </el-steps>
        <div
          v-if="active == 0"
          style="min-height: 320px; display: flex; justify-content: center"
        >
          <userPhone @upChange="upChange"></userPhone>
        </div>
        <div v-else-if="active == 1">
          <userInfo
            :gaokaoyear="gaokaoyear"
            :provincelist="provincelist"
            @upChange="upChange"
          ></userInfo>
        </div>
        <div v-else>
          <userTable
            @upChange="upChange"
            :payType="payType"
            :phone="studentInfo.phone"
          ></userTable>
        </div>
        <div class="sendMsg" v-if="active !== 2">
          <el-switch
            v-model="switchVal"
            style="--el-switch-on-color: #165dff"
          />
          <span :class="{ switchAc: switchVal }"> 发送短信</span>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="关闭后，创建客单成功，学生/家长不会知晓"
            placement="top"
          >
            <img
              src="@/assets/images/q.png"
              style="width: 12px; height: 12px"
            />
          </el-tooltip>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import {
  tzyOrdersCreate,
  userCreate,
  isHaveUser,
} from '@/api/leader/Filling.js';
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import userPhone from './userPhone.vue';
import userInfo from './userInfo.vue';
import userTable from './userTable.vue';
// 支付类型
const payType = ref(1);
const switchVal = ref(true);
const emit = defineEmits(['refreshStudentList', 'getTzyCount']);

const { provincelist, gaokaoyear } = defineProps({
  provincelist: {
    type: Array,
    default: () => [],
  },
  gaokaoyear: {
    type: [Array, Object],
    default: () => ({}),
  },
});

let studentInfo = reactive({
  phone: '', // 手机号
  nick: '', // 名字
  sex: '', // 性别0-男 1-女
  nation: '', // 民族
  pid: '', // 高考省ID
  graduate_time: '', // 高考年份
  s_province: '', // 学校所在省
  s_city: '', // 学校所在城市
  s_district: '', // 学校所在区
  s_school: '', // 学校名称
  f_name: '', // 父亲姓名
  f_phone: '', // 父亲电话
  f_career: '', // 父亲职业
  m_name: '', // 母亲姓名
  m_phone: '', // 母亲电话
  m_career: '', // 母亲职业
  remark: '', // 备注
});

// 是否显示当前页面
const dialogVisible = ref(false);
const active = ref(0); // 设置默认参数

const showAddUserInfo = () => {
  dialogVisible.value = true;
};

function handleClose() {
  dialogVisible.value = false;
  active.value = 0; // 重新设置默认
}

function upChange(curIndex, toIndex, val) {
  if (curIndex == 1) {
    // 手机号填写
    studentInfo.phone = val;
    // 判断手机号是否已在后台存在
    isHaveUser({ phone: val }).then((res) => {
      payType.value = res.data.type;
      if (res.data.isUser) {
        // 存在跳转购买服务
        active.value = 2;
      } else {
        // 不存在跳转用户信息录入
        active.value = 1;
      }
    });
  } else if (curIndex == 2) {
    // 用户信息录入
    let info = {
      ...studentInfo,
      ...val,
    };
    studentInfo = info;

    if (toIndex == 1) {
      active.value = toIndex - 1;
    } else {
      let studentData = studentInfo;
      userCreate(studentData).then(() => {
        active.value = toIndex - 1;
      });
    }
  } else if (curIndex == 3) {
    // 购买服务
    if (toIndex == 0) {
      let orderData = {
        studentMobile: studentInfo.phone,
        serviceId: val.id,
        serviceName: val.name,
        type: payType.value,
        sendMsg: switchVal.value,
      };
      tzyOrdersCreate(orderData).then((res) => {
        if (res.code == 20000) {
          ElMessage({
            type: 'success',
            message: res.msg,
          });
          // 通知刷新用户列表
          emit('refreshStudentList');
          emit('getTzyCount');
          // 关闭页面
          handleClose();
        }
      });
    } else {
      if (studentInfo.s_province.length > 0) {
        active.value = toIndex - 1;
      } else {
        active.value = 1;
      }
    }
  }
}

defineExpose({
  showAddUserInfo,
});
</script>
<style lang="scss" scoped>
// 默认当前激活步骤显示的是黑色，这里修改显示为蓝色
:deep(.el-step__head.is-process) {
  color: #1890ff !important; // 圆圈中数字
  border-color: #1890ff !important; // 圆圈
}

:deep(.el-step__title.is-process) {
  color: #1890ff !important; // 圆圈下的标题文本
}
.sendMsg {
  display: flex;
  align-items: center;
  gap: 5px;
  position: absolute;
  bottom: 10px;
  left: 24px;
  font-size: 14px;
  color: #1d2129;
  .switchAc {
    color: #165dff;
  }
}
</style>
<style lang="scss">
.addus {
  .el-dialog {
    width: 800px;
    transform: none;
    left: 0;
    top: 0;
    margin: 0 auto;
    position: relative;
    margin: 0 auto !important;
    margin-top: 10vh !important;
    max-height: none;
    min-height: auto;
  }
  .el-dialog__header {
    height: auto !important;
    min-height: fit-content !important;
    margin-bottom: 20px !important;
  }
}
</style>
